<template>
  <template v-for="(item) in menus">
    <template v-if="item.children && item.children.length > 0">
      <el-sub-menu :index="item.routePath" :key="item.routePath">
        <template #title>
          <el-icon>
            <component :is="item.icon" :size="24"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <menu-tree :menus="item.children" :mode="item.mode"/>
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="item.routePath" :key="item.routePath" :disabled="!item.valid">
        <el-icon>
          <component :is="item.icon" :size="24"></component>
        </el-icon>
        <template #title>
          {{ item.name }}
        </template>
      </el-menu-item>
    </template>
  </template>
</template>

<script>

export default {
  name: "menu-tree",
  props: {
    menus: {
      type: Array,
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style>
el-menu-item{
  overflow: hidden;
}
</style>
